<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			#supDiv {
				background-color: #F0F8FF;
			}
			
			
			
			#div1 {
				width: 100%;
				height: 130px;
				background-color: red;
			}
			
			#nav-top {
				background-color: #008B8B;
				width: 100%;
				height: 60px;
			}
			
			#div2 {
				background-color: white;
				margin-left: 10%;
				width: 60%;
				height: 1000px;
				display: inline-block;
			
			}
			
			#div-left1 {
				background-color: white;
				margin-left: 4%;
				position: absolute;
				width: 20%;
				height: 300px;
				display: inline-block;
				
			}
			
			#div-left2 {
				background-color: #FAEBD7;
				margin-left: 4%;
				position: absolute;
				margin-top: 310px;
				width: 20%;
				height: 300px;
				display: inline-block;
			}
			
			#title-h4 {
				display: inline-block;
				text-align: center;
			}
			
			#div-left3 {
				background-color: white;
				margin-left: 4%;
				position: absolute;
				margin-top: 620px;
				width: 20%;
				height: 120px;
				display: inline-block;
			}
			
			#input {
				display: block;
			}
			
			#nav-bottom {
				height: 60px;
				width: 50%;
				border-color: #008B8B;
				border-style: dotted;
			}
			
			#user-div {
				display: inline-block;
				height: 100px;
				width: 40%;
			}
			
			#a {
				display: block;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="supDiv">
			<div id="div1">
				<h3>Z皓</h3>
				<p> 学如逆水行舟，不进则退。</p>
			</div>	
			
			<nav id="nav-top">
				<button> 博客园 </button>
				<button> 首页 </button>
				<button> 新随笔 </button>
				<button> 联系 </button>
				<button> 订阅 </button>
				<button> 管理 </button>
			</nav>
			
			
			<div id="div2">
				
				<h3>任务九：使用HTML/CSS实现一个复杂页面</h3>
				<h5>任务目的</h5>
				<li>通过实现一个较为复杂的页面，加深对于HTML，CSS的实战能力</li>
				<li>实践代码的复用、优化</li>
				<br />
				<h5>任务描述</h5>
				<li>通过HTML及CSS实现设计稿 <a href="www.baidu.com">设计稿PSD文件（点击下载）</a>，效果</li>
				<li>整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致</li>
				<br />
				<h4>任务完成与总结：</h4>
				<p> 一个人搞这个页面，肝有点不行，索性不切图了，计划直接把大概的页面写出来，然而写到第二天的时候完全失去耐心Zzzz，这次任务算是考验到我了。算了，还是分析其他人的代码吧，不过自己的代码还是要贴上，知道这次完成的十分不好，不管怎么说，毕竟是亲儿子（自己写出来的），就不嫌它丢人了。https://cruxf.github.io/BaiduTask/test9.html</p>
				<h6>1、搜索框与登录效果的实现</h6>
				<img src="https://images2015.cnblogs.com/blog/1108615/201704/1108615-20170414105552345-2056972312.png" />
				<h6>代码：</h6>
				<img src="https://images2015.cnblogs.com/blog/1108615/201704/1108615-20170414105254064-1291556458.png" />
				
				<nav id="nav-bottom">
					<button>好文要顶</button>
					<button>关注我</button>
					<button>收藏该问</button>
					<button>微博</button>
					<button>微信</button>
				</nav>
				
				<img src="https://pic.cnblogs.com/face/1108615/20171019160059.png" />
				<div id="user-div">
					<a id="a" href="two.html">Z皓</a>
					<a id="a" href="two.html">关注-38</a>
					<a id="a" href="two.html">粉丝-103</a>
				</div>
				
				<button>支持</button>
				<button>反对</button>
				
			</div>
			
			<div id="div-left1">
				<h3>公告</h3>
				<h5>昵称： Z皓</h5>
				<h5>园龄： 2年9个月</h5>
				<h5>粉丝： 103</h5>
				<h5>关注： 38</h5>
				<button>+加关注</button>
			</div>
			
			<div id="div-left2">
				<button>上个月</button>
				<h4 id="title-h4">2019年12月</h4>
				<button>下个月</button>
			</div>
			
			<div id="div-left3">
				<h3>公告</h3>
				<input id="input" border="1" />
				<input id="input" border="1" />
			</div>
			

		</div>
		
		
		
	</body>
</html>
